<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //【1】传统的js脚本加载
        // （1）严格的读取顺序。
        // 多个文件互相依赖的情况下，依赖性最小的文件必须放在最前面，依赖性最大的文件必须放在最后面，否则代码会报错。
        // （2）性能问题。
        // 浏览器采用"同步模式"加载<script>标签，也就是说，页面会"堵塞"（blocking）。必须读取完一个再去读取另一个，造成读取时间大大延长，页面响应缓慢。
        //【2】为了解决这些问题，可以使用DOM方法，动态加载Javascript文件。
        // 这样做的原理是，浏览器即时创造出一个<script>标签，然后"异步"读取Javascript文件。这样不会造成页面堵塞，但会造成另外一个问题：
        // 这样加载的Javascript文件，不在原始的DOM结构之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回调函数对它无效。
        function loadScript(url) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = url;
            document.body.appendChild(script);
        }
        //【3】本质为2中的思路的外部函数库LABjs和RequireJS，可以帮助我们更有效地管理Javascript加载。
        // <script src = "script1.js" ><script>
        // <script src="script2-a.js"><script>
        // <script src="script2-b.js"><script>
        // <script type="text/javascript">
        //     initScript1();
        //     initScript2();
        // <script>
        // <script src="script3.js"><script>
        // <script type="text/javascript">
        //     initScript3();
        // <script>

        // 上面这段代码，将依次加载4个javascript文件：script1.js、script2-a.js、script2-b.js和script3.js。
        // 在加载完前三个文件后，运行两个函数initScript1()和initScript2()；加载完第四个文件后，再运行函数initScript3()。
        // 下面，用LABjs对其进行改写：
        // 　 < script src = "LAB.js" > <script>


        // <script type="text/javascript">
        // $LAB.script("script1.js").wait()
        // 　　　　　.script("script2-a.js")
        // 　　　　　.script("script2-b.js")
        // 　　　　　.wait(function() {
        //               initScript1();
        //               initScript2();
        // }).script("script3.js").wait(function() {
        //     initScript3();
        // });
        // <script>


        // 首先，$LAB对象替代了<script>标签，然后.script()方法表示加载Javascript文件，不带参数的.wait()方法表示
        // 立即运行刚才加载的Javascript文件，带参数的.wait()方法也是立即运行刚才加载的Javascript文件，但是还运行参数中指定的函数。

        // 这里需要注意的是，可以同时运行多条$LAB链，但是它们之间是完全独立的，不存在次序关系。如果你要确保一个Javascript文件在另一个文件之后运行，
        // 你只能把它们写在同一个链操作之中。只有当某些脚本是完全无关的时候，你才应该考虑把它们分成不同的$LAB链，表示它们之间不存在相关关系。
    </script>
</body>

</html>